<template>
    <div class="box">
        <div class="header">
            <van-nav-bar
              title="注册界面"
              right-text="去登录"
              left-arrow
              @click-left="onClickLeft"
              @click-right="onClickRight"
            />
        </div>
        <div class="content">
            <van-form @submit="onSubmit">
              <van-field
                v-model="username"
                clearable
                name="userName"
                label="用户名"
                placeholder="用户名"
                :right-icon = "userTip"
              />
              <van-field
                v-model="tel"
                clearable
                name="tel"
                label="手机号"
                placeholder="请输入手机号"
                :right-icon = "telTip"
                @input="telT"
              />
              <van-field
                v-model="sms"
                name="code"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
                :right-icon = "smsTip"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="send" :disabled="smsFlag">{{smsMsg}}</van-button>
                </template>
              </van-field>
              <van-field
                v-model="password"
                clearable
                type="password"
                name="passWord"
                label="密码"
                placeholder="密码"
                :right-icon = "passwordTip"
              />
              <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" :disabled="allTip">
                  注册
                </van-button>
              </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { getCode, register } from '../../api/index'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      password: '',
      tel: '',
      sms: '',
      smsFlag: true,
      smsMsg: '发送验证码',
      t: null,
      time: 60
    }
  },
  methods: {
    // 使用的是push的路由跳转方式 使用$router.back可以返回上层路由
    onClickLeft () {
      // 利用$router.back()回到上层路由
      this.$router.back()
    },
    // 去登录
    onClickRight () {
      this.$router.push('/login')
    },
    // 将表单数据进行验证 并发送到后台中去
    onSubmit (val) {
      // 解决表单点击按钮会触发submit提交事件
      // 原理：当alltip满足条件的时候返回的是false 不满足的时候返回的是true
      // 即 当all都为正确的时候不再执行以下程序 当不满足的情况下才继续执行以下的代码
      if (this.allTip) {
        return
      }
      register(val).then(res => {
        // Bug 跨域 假设拿到返回值 已解决 配置头部信息
        // 对返回的状态进行判断
        // console.log(res.data.state)
        switch (res.data.state) {
          case 201:
            Toast('用户名已被注册')
            break
          case 202:
            Toast('请先发送验证码')
            this.sms = ''
            break
          case 203:
            Toast('一个手机号只允许注册一个账号')
            break
          case 200:
            Toast({
              message: '注册成功',
              // Toast有onclose方法 回调函数
              // 即轻提示结束之后就进行页面的跳转
              onClose: () => {
                this.$router.push('/login')
              }
            })
            break
        }
      })
    },
    // 当电话号码验证符合的时候对发送验证码进行解锁
    telT () {
      // 对telTip进行判断当符合的时候解锁发送按钮反之
      if (this.telTip === 'success') {
        this.smsFlag = false
      } else {
        this.smsFlag = true
      }
    },
    // 通过点击发送验证码进行获取验证码
    // Vant 表单中只要有点击事 也会触发submit事件
    // 解决方法：根据表单的验证状态来决定是否需要触发submit事件
    send () {
      getCode({ tel: this.tel }).then(res => {
        if (res.data.state === 201) {
          Toast('手机号已被注册')
        } else {
          Toast('注册成功')
        }
      })
      // 点击发送验证码，无论验证成功或者失败都要有60s的倒计时时间
      // 并且发送按钮要变为不可点击样式
      // 开启定时器
      this.smsFlag = true
      // 初始的时候执行一次 因为计时器会隔一秒后执行 所以导致无法看到60
      this.smsMsg = this.time + 's后重新发送'
      this.t = setInterval(() => {
        this.time--
        this.smsMsg = this.time + 's后重新发送'
        if (this.time <= 0) {
          clearInterval(this.t)
          // 初始化内容
          this.smsMsg = '发送验证码'
          // 初始化倒计时时间
          this.time = 60
          // 重启发送按钮
          this.smsFlag = false
        }
      }, 1000)
    }
  },
  // 通过计算进行正则验证 给出符合情况下的状态
  computed: {
    userTip () {
      // 用户名的正则验证 ^.第一位为任意的字符
      if (/^.{2,12}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    smsTip () {
      if (/^\d{4}$/.test(this.sms)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    // 判断以上所以表单的验证 符合则解锁提交按钮
    allTip () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      // 只有当所有的验证都符合条件的时候才对注册按钮进行解禁
      if (this.userTip && this.telTip && this.smsTip && this.passwordTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
</style>
